<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-alert *ngIf="isTDSQL" lvType="info" [lvClosable]="false">{{'protection_tdsql_livemount_tips_label'|i18n}}</lv-alert>
<lv-form [formGroup]='formGroup' lvLabelWidth="130px">
    <div class="aui-gutter-column-lg">
        <h2>{{'explore_mount_target_label' | i18n}}</h2>
    </div>
    <lv-form-item *ngIf="!isOracle">
        <lv-form-label lvRequired>{{'common_location_label'|i18n}}</lv-form-label>
        <lv-form-control>
            <div formArrayName='targetHosts'>
                <div *ngFor='let item of targetHosts; let i=index' [formGroupName]="i" class="aui-gutter-column-sm">
                    <lv-group lvGutter='36px' class="lv-group-flex-start">
                        <lv-form-control>
                            <lv-select formControlName="searchSelect" (ngModelChange)="filterChange($event,i,item)"
                            lvValueKey="value" lvMode="multiple" [lvOptions]="labelOptions" lvShowFilter lvFilterKey='label'
                            [lvPlaceholder]="'explore_select_tag_label' | i18n" lvFilterMode='contains' style="width: 150px;"></lv-select>
                        </lv-form-control>
                        <lv-form-control [lvErrorTip]="targetHostErrorTip">
                            <lv-select formControlName="host_id" lvValueKey="key" [lvOptions]="item.value.hostOptions" class="target-host-options"
                                (ngModelChange)="targetHostChange(i, $event)" (lvOpenChange)="targetHostOpenChange(i, $event)"
                                lvShowFilter  lvFilterKey='label' lvFilterMode='contains'  #selectHost>
                            </lv-select>
                        </lv-form-control>
                        <lv-form-control>
                            <div style="width: 200px;" lv-overflow>
                                {{targetIpLabel}} {{item.value.ip | nil}}
                            </div>
                        </lv-form-control>
                        <lv-form-control
                            *ngIf="!componentData.childResourceType || componentData?.childResourceType[0] !== dataMap.Resource_Type.tdsqlInstance.value">
                            <div style="width: 200px;" lv-overflow>
                                {{versionLabel}} {{item.value.version | nil}}
                            </div>
                        </lv-form-control>
                        <lv-form-control>
                            <span (click)='removeRow(i)' *ngIf="targetHosts.length > 1">
                                <i lv-icon='aui-icon-delete' class="remove-target-host-container"></i>
                            </span>
                        </lv-form-control>
                    </lv-group>
                </div>
            </div>
            <span
                [ngClass]="{'aui-link-disabled': formGroup.get('targetHosts').invalid || isLiveMountCopy(), 'aui-link': formGroup.get('targetHosts').valid && !isLiveMountCopy()}"
                (click)="addRow()" *ngIf="formGroup.value.targetHosts.length < 8">
                <i lv-icon='aui-icon-create' class="aui-gutter-row-sm"></i>
                {{'common_add_label' | i18n}}
            </span>
        </lv-form-control>
    </lv-form-item>
  <div formArrayName="targetInstances" *ngIf="isOracle" class="aui-gutter-column-md">
    <ng-container *ngFor="let item of targetInstances.controls; let i = index;" [formGroupName]="i" class="aui-gutter-column-sm">
      <lv-form-item>
        <lv-form-label>{{'explore_target_location_label'|i18n}}#{{i+1}}</lv-form-label>
        <lv-form-control>
            <lv-group lvGutter='36px' class="lv-group-flex-start">
                <lv-select formControlName="searchSelect" (ngModelChange)="filterChange($event,i, item)" lvValueKey="value"
                    lvMode="multiple" [lvOptions]="labelOptions" lvShowFilter lvFilterKey='label' lvFilterMode='contains'
                   [lvPlaceholder]="'explore_select_tag_label' | i18n" style="width: 150px;"></lv-select>
                <lv-group>
                    <lv-form-control [lvErrorTip]="targetHostErrorTip">
                    <lv-select formControlName="host_id" lvValueKey="key" [lvOptions]="item.value.hostOptions"
                        class="target-host-options" lvFilterMode="contains" lvShowFilter lvFilterKey="label" #selectHost>
                    </lv-select>
                </lv-form-control>
                    <span (click)='targetInstances.removeAt(i)' *ngIf="targetInstances.length > 1" class="remove-location-icon">
                        <i lv-icon='aui-icon-delete' class="remove-target-host-container"></i>
                    </span>
                </lv-group>
            </lv-group>
        
            <span class="version-label">{{'protection_database_version_label'|i18n}}：{{item.value.version | nil}}</span>
        </lv-form-control>
      </lv-form-item>
      <lv-form-item>
        <lv-form-label></lv-form-label>
        <lv-form-control>
        <lv-datatable
            lvFake
            formArrayName="instance_array"
            *ngIf="item.get('instance_array').controls.length>0"
        >
        <thead>
        <tr>
            <th>
                <lv-form-label lvRequired>
                    {{'protect_origin_instance_label'|i18n}}
                </lv-form-label>
            </th>
            <th width="180px">
                {{'protection_node_ip_address_label'|i18n}}
            </th>
            <th>
                {{'protection_target_instance_label'|i18n}}
            </th>
        </tr>
        </thead>
        <tbody>
        <ng-container *ngFor="let inst_item of item.get('instance_array').controls; let j = index;" [formGroupName]="j">
            <tr>
            <td>
                <lv-form-control class="migrate-host-container" [lvErrorTip]="instanceInputErrorTip">
                    <lv-select
                        [lvOptions]="item.value.options"
                        formControlName="origin_inst"
                        lvValueKey="value"
                        lvShowClear
                        lvShowFilter
                        lvFilterKey="label"
                        lvFilterMode="contains"
                        style="width: 220px"
                    >
                    </lv-select>
                </lv-form-control>
            </td>
            <td>
                <span lv-overflow>{{ inst_item.value.ip }}</span>
            </td>
            <td>
                <lv-form-control [lvErrorTip]="instanceInputErrorTip" class="migrate-host-container">
                    <input lv-input formControlName="target_inst" [placeholder]="instanceInputLabel" style="width: 230px"/>
                </lv-form-control>
            </td>
        </tr>
        </ng-container>
        </tbody>
        </lv-datatable>
        </lv-form-control>
      </lv-form-item>
    </ng-container>
    <span
      [ngClass]="{'aui-link-disabled': formGroup.get('targetInstances').invalid || isLiveMountCopy(), 'aui-link': formGroup.get('targetInstances').valid && !isLiveMountCopy()}"
      (click)="addInstanceRow()" *ngIf="formGroup.value.targetInstances.length < 8" class="add-btn">
                <i lv-icon='aui-icon-create'></i>
      {{'explore_add_target_location_label' | i18n}}
    </span>
  </div>
    <lv-form-item
        *ngIf="!(componentData.childResourceType && dataMap.Resource_Type.tdsqlInstance.value.includes(componentData.childResourceType[0]) || isOracle && (!!componentData?.rowCopy?.storage_snapshot_flag || !!componentData?.selectionCopy?.storage_snapshot_flag))">
        <lv-form-label>{{'explore_start_database_label' | i18n}}</lv-form-label>
        <lv-form-control>
            <lv-switch formControlName='power_on'
                [lvDisabled]="componentData.childResourceType && [dataMap.Resource_Type.MySQLInstance.value].includes(componentData.childResourceType[0])">
            </lv-switch>
        </lv-form-control>
    </lv-form-item>
    <div class="aui-gutter-column-xl"></div>
    <lv-collapse [lvMultiExpansion]="'false'" lvType="simple" class="live-mount-advanced-container">
        <lv-collapse-panel lvTitle="{{'common_advanced_label'|i18n}}" [lvExpanded]="false">
            <lv-form-item
                *ngIf="componentData.childResourceType && dataMap.Resource_Type.tdsqlInstance.value.includes(componentData.childResourceType[0])">
                <lv-form-label lvRequired>{{ "common_port_label" | i18n}}</lv-form-label>
                <lv-form-control [lvErrorTip]='mysqlPortErrorTip'>
                    <input lv-input type='text' formControlName='mysql_port' class="script-input" />
                </lv-form-control>
            </lv-form-item>
            <lv-form-item
                *ngIf="componentData.childResourceType && dataMap.Resource_Type.oracle.value.includes(componentData.childResourceType[0]) || dataMap.Resource_Type.oracle.value === componentData.selectionResource?.resource_sub_type">
                <lv-form-label>{{'protection_disable_bct_label' | i18n}}</lv-form-label>
                <lv-form-control>
                    <lv-switch formControlName='bctStatus'></lv-switch>
                </lv-form-control>
            </lv-form-item>
            <lv-form-item>
                <lv-form-label [lvRequired]="formGroup.value.bindWidthStatus"> {{ 'common_bindwidth_label' | i18n }}
                </lv-form-label>
                <lv-form-control>
                    <lv-group lvDirection='vertical' lvGutter='8px'>
                        <lv-switch formControlName='bindWidthStatus' class="mount-bindWidth"></lv-switch>
                        <lv-group lvGutter='8px' *ngIf="formGroup.value.bindWidthStatus" class="lv-group-flex-start">
                            <lv-group lvDirection='vertical'>
                                <lv-form-label>
                                    <span class="aui-text-help-sm">
                                        {{'explore_min_label' | i18n}}
                                    </span>
                                </lv-form-label>
                                <lv-form-control [lvErrorTip]='minBandwidthErrorTip'>
                                    <input lv-input type="text" formControlName="min_bandwidth"
                                        class="advanced-input-container" placeholder="1~999999999" />
                                </lv-form-control>
                            </lv-group>
                            <lv-group lvDirection='vertical'>
                                <lv-form-label>
                                    <span class="aui-text-help-sm">
                                        {{'explore_max_label' | i18n}}
                                    </span>
                                </lv-form-label>
                                <lv-form-control [lvErrorTip]='maxBandwidthErrorTip'>
                                    <input lv-input type="text" formControlName="max_bandwidth"
                                        class="advanced-input-container" placeholder="1~999999999" />
                                </lv-form-control>
                            </lv-group>
                            <lv-group lvDirection='vertical'
                                *ngIf="formGroup.value.max_bandwidth && formGroup.get('max_bandwidth').valid">
                                <lv-form-label>
                                    <span class="aui-text-help-sm">
                                        {{'explore_burst_label' | i18n}}
                                    </span>
                                </lv-form-label>
                                <lv-form-control [lvErrorTip]='burstBandwidthErrorTip'>
                                    <input lv-input type="text" formControlName="burst_bandwidth"
                                        class="advanced-input-container" placeholder="1~999999999" />
                                </lv-form-control>
                            </lv-group>
                            <div class="bandwidth-unit">MB/s</div>
                        </lv-group>
                    </lv-group>
                </lv-form-control>
            </lv-form-item>
            <lv-form-item>
                <lv-form-label [lvRequired]="formGroup.value.iopsStatus">
                    {{ 'protection_nor_iops_label' | i18n }}
                </lv-form-label>
                <lv-form-control>
                    <lv-group lvDirection='vertical' lvGutter='8px'>
                        <lv-group lvGutter='8px'>
                            <lv-switch formControlName='iopsStatus'></lv-switch>
                            <span class="aui-link" lv-popover [lvPopoverTrigger]="'hover'"
                                [lvPopoverContent]="iopsContentTpl">
                                {{'common_more_label'|i18n}}
                            </span>
                        </lv-group>
                        <lv-group lvGutter='8px' *ngIf="formGroup.value.iopsStatus" class="lv-group-flex-start">
                            <lv-group lvDirection='vertical'>
                                <lv-form-label>
                                    <span class="aui-text-help-sm">
                                        {{'explore_min_label' | i18n}}
                                    </span>
                                </lv-form-label>
                                <lv-form-control [lvErrorTip]='minIopsErrorTip'>
                                    <input lv-input type="text" formControlName="min_iops"
                                        class="advanced-input-container" placeholder="100~999999999" />
                                </lv-form-control>
                            </lv-group>
                            <lv-group lvDirection='vertical'>
                                <lv-form-label>
                                    <span class="aui-text-help-sm">
                                        {{'explore_max_label' | i18n}}
                                    </span>
                                </lv-form-label>
                                <lv-form-control [lvErrorTip]='maxIopsErrorTip'>
                                    <input lv-input type="text" formControlName="max_iops"
                                        class="advanced-input-container" placeholder="100~999999999" />
                                </lv-form-control>
                            </lv-group>
                            <lv-group lvDirection='vertical'
                                *ngIf="formGroup.value.max_iops && formGroup.get('max_iops').valid">
                                <lv-form-label>
                                    <span class="aui-text-help-sm">
                                        {{'explore_burst_label' | i18n}}
                                    </span>
                                </lv-form-label>
                                <lv-form-control [lvErrorTip]='burstIopsErrorTip'>
                                    <input lv-input type="text" formControlName="burst_iops"
                                        class="advanced-input-container" placeholder="100~999999999" />
                                </lv-form-control>
                            </lv-group>
                        </lv-group>
                    </lv-group>
                </lv-form-control>
            </lv-form-item>
            <ng-container
                *ngIf="(formGroup.value.iopsStatus && formGroup.value.burst_iops) || (formGroup.value.bindWidthStatus && formGroup.value.burst_bandwidth)">
                <lv-form-item>
                    <lv-form-label lvRequired> {{'explore_max_burst_label' | i18n}}</lv-form-label>
                    <lv-form-control [lvErrorTip]='burstTimeErrorTip'>
                        <input lv-input type="text" formControlName="burst_time" class="advanced-input-container"
                            placeholder="1~999999999" />
                        <i lv-icon="aui-icon-help" lv-tooltip="{{'explore_max_burst_desc_label' | i18n}}"
                            lvTooltipTheme="light" class="configform-constraint" lvColorState='true'></i>
                    </lv-form-control>
                </lv-form-item>
            </ng-container>
            <lv-form-item>
                <lv-form-label> {{'protection_nor_latency_label' | i18n}}</lv-form-label>
                <lv-form-control>
                    <lv-group lvDirection='vertical' lvGutter='8px'>
                        <lv-group lvGutter='8px'>
                            <lv-switch formControlName='latencyStatus'></lv-switch>
                            <span class="aui-link" lv-popover [lvPopoverTrigger]="'hover'"
                                [lvPopoverContent]="latencyContentTpl">
                                {{'common_more_label'|i18n}}
                            </span>
                        </lv-group>
                        <lv-group lvGutter='8px' *ngIf="formGroup.value.latencyStatus">
                            <lv-group lvDirection='vertical'>
                                <lv-form-label lvRequired>
                                    <span class="aui-text-help-sm">
                                        {{'explore_max_label' | i18n}}
                                    </span>
                                </lv-form-label>
                                <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
                                    <lv-select formControlName="latency" [lvOptions]='latencyOptions' lvValueKey='value'
                                        class="advanced-input-container" lvShowClear>
                                    </lv-select>
                                </lv-form-control>
                            </lv-group>
                        </lv-group>
                    </lv-group>
                </lv-form-control>
            </lv-form-item>
            <ng-container *ngIf="!isDrill">
                <lv-form-item>
                    <lv-form-label>
                        {{'explore_mount_pre_script_label' | i18n}}
                    </lv-form-label>
                    <lv-form-control [lvErrorTip]='scriptNameErrorTip'>
                        <input lv-input type='text' formControlName='pre_script' class="script-input"
                            placeholder="{{'common_script_linux_placeholder_label'|i18n}}" />
                        <i lv-icon="aui-icon-help" lv-tooltip="{{'common_script_agent_position_label' | i18n}}"
                            lvTooltipTheme="light" class="configform-constraint" lvColorState='true'></i>
                    </lv-form-control>
                </lv-form-item>
                <lv-form-item>
                    <lv-form-label>
                        {{'explore_mount_success_script_label' | i18n}}
                    </lv-form-label>
                    <lv-form-control [lvErrorTip]='scriptNameErrorTip'>
                        <input lv-input type='text' formControlName='post_script' class="script-input"
                            placeholder="{{'common_script_linux_placeholder_label'|i18n}}" />
                        <i lv-icon="aui-icon-help" lv-tooltip="{{'common_script_agent_position_label' | i18n}}"
                            lvTooltipTheme="light" class="configform-constraint" lvColorState='true'></i>
                    </lv-form-control>
                </lv-form-item>
                <lv-form-item>
                    <lv-form-label>
                        {{'explore_mount_fail_script_label' | i18n}}
                    </lv-form-label>
                    <lv-form-control [lvErrorTip]='scriptNameErrorTip'>
                        <input lv-input type='text' formControlName='failed_script' class="script-input"
                            placeholder="{{'common_script_linux_placeholder_label'|i18n}}" />
                        <i lv-icon="aui-icon-help" lv-tooltip="{{'common_script_agent_position_label' | i18n}}"
                            lvTooltipTheme="light" class="configform-constraint" lvColorState='true'></i>
                    </lv-form-control>
                </lv-form-item>
            </ng-container>
            <ng-container>
                <aui-database-config [formGroup]="formGroup"
                    [rowCopy]="componentData.rowCopy || componentData.selectionCopy"
                    [resSubType]="componentData.childResourceType" [isDrill]="isDrill"></aui-database-config>
            </ng-container>
        </lv-collapse-panel>
    </lv-collapse>
</lv-form>


<ng-template #iopsContentTpl>
    <lv-group lvGutter='32px'>
        <lv-group lvDirection='vertical' lvGutter='16px'>
            <span class="aui-text-desc">{{'explore_io_size_label' | i18n}}</span>
            <span class="aui-text-desc">Min</span>
            <span class="aui-text-desc">Max</span>
            <span class="aui-text-desc">Burst</span>
        </lv-group>
        <lv-group *ngFor="let item of iopsItems" lvDirection='vertical' lvGutter='16px'>
            <span>{{item.header}}</span>
            <span>{{item.min | nil}}</span>
            <span>{{item.max | nil}}</span>
            <span>{{item.burst | nil}}</span>
        </lv-group>
    </lv-group>
</ng-template>

<ng-template #latencyContentTpl>
    <lv-group lvGutter='32px'>
        <lv-group lvDirection='vertical' lvGutter='16px'>
            <span class="aui-text-desc">{{'explore_io_size_label' | i18n}}</span>
            <span class="aui-text-desc">Max</span>
        </lv-group>
        <lv-group *ngFor="let item of latencyItems" lvDirection='vertical' lvGutter='16px'>
            <span>{{item.header}}</span>
            <span>{{item.max | nil}}</span>
        </lv-group>
    </lv-group>
</ng-template>
